<template>
  <el-carousel class="home-feature-slides" height="450px">
    <el-carousel-item class="item" v-for="slide in slides" :key="slide.id">
      <h2 class="title">{{ slide.title }}</h2>
      <h3 class="subtitle">{{ slide.subtitle }}</h3>
      <img class="pic" :src="slide.pic" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        {
          id: 1,
          title: '多方式创建编辑问卷',
          subtitle: '自由创建、导入问卷、使用模板三种方式随意选择',
          pic: 'https://wj.qq.com/image/index_slider_p0.png?v=@version',
        },
        {
          id: 2,
          title: '免费简约的问卷系统',
          subtitle: '所有功能全部免费，简约好用，轻松开启在线调试',
          pic: 'https://wj.qq.com/image/index_slider_p1.png?v=@version',
        },
        {
          id: 3,
          title: '数据实时在线分析',
          subtitle: '回收数据实时在线统计，图表化展示，清晰直观',
          pic: 'https://wj.qq.com/image/index_slider_p2.png?v=@version',
        },
        {
          id: 4,
          title: '跨终端跨平台自适应',
          subtitle: 'PC、手机、平板不同终端自适应',
          pic: 'https://wj.qq.com/image/index_slider_p3.png?v=@version',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home-feature-slides {
  background-image: url("../assets/home-slides-fea.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.item {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title,
.subtitle {
  font-weight: normal;
  margin: 0;
}

.title {
  font-size: 50px;
}

.subtitle {
  font-size: 20px;
  margin-top: -3px;
}

.pic {
  height: 156px;
  margin-top: 33px;
}
</style>
